<template>
	<view class="content">
		<view class="userList">
			<view class="listItem" v-for="item in state.userList" :key="item.id">
				<view class="infoItem">真实姓名: {{item.realName}}</view>
				<view class="infoItem">手机号: {{item.mobile}}</view>
				<view class="infoItem">公司名称: {{item.company}}</view>
				<view class="handle">
					<view class="btnBox">
						<u-button type="error" size="mini" @click="refuse(item)">拒绝</u-button>
					</view>
					<view class="btnBox">
						<u-button type="primary" size="mini" @click="access(item)" >通过</u-button>
					</view>
				</view>
			</view>
			<view  v-if="!state.userList.length" class="w100">
				<u-empty mode="car" text="暂无数据">
				</u-empty>
			</view>
		</view>
		<safeBottom></safeBottom>
	</view>
</template>

<script setup>
	import request from '@/utils/request.js'
import { reactive } from "vue";
import { onReachBottom, onShow } from '@dcloudio/uni-app'
	const state = reactive({
		userList: [],
		isEnd:false,
		loading: false,
		params: {
			page: 0,
			count: 20
		},
	})
	const handelFun = (item,isAuth) => {
		request({
			url:'api/login/check',
			method:'post',
			needLogin: true,
			data: {
				id: item.id,
				isAuth
			}
		}).then(res => {
			uni.showToast({
				title: '操作成功！'
			})
			getUserList({page: 0, count: Math.ceil(state.userList.length/state.params.count) & state.params.count})
		})
	}
	const refuse = item => {
		uni.showModal({
			title: '提醒',
			content: '确定要拒绝吗？',
			success: res => {
				if(res.confirm) {
					handelFun(item,0)
				}
			}
		})
	}
	const access = item => {
		uni.showModal({
			title: '提醒',
			content: '确定要通过吗？',
			success: res => {
				if(res.confirm) {
					handelFun(item,1)
				}
			}
		})
	}
	const getUserList = (params) => {
		state.loading = true;
		request({
			url:'api/login/checkList',
			data: params || state.params,
			needLogin: true,
		}).then(res => {
			// 整体刷新数据和首页赋值逻辑一致
			if(params || state.params.page === 0) {
				state.userList = res;
			}else {
				state.userList = [...state.userList,...res]
			}
			state.isEnd = res.length < (params?.count || state.params.count);
			if(!state.isEnd && !params) state.params.page++;
			state.loading = false;
		}).catch(err => {
			state.loading = false;
		})
	}
	getUserList()
	onReachBottom(() => {
		if(state.isEnd || state.loading) return;
		getUserList()
	})
</script>

<style lang="scss">
.content {
	padding: 30rpx;
	.userList {
		.listItem {
			padding: 20rpx;
			border-radius: 8rpx;
			background-color: $main-color;
			.infoItem {
				color: #fff;
				font-size: 28rpx;
				&+.infoItem {
					margin-top: 10rpx;
				}
			}
			&+.listItem {
				margin-top: 30rpx;
			}
			.handle {
				display: flex;
				justify-content: flex-end;
				margin-top: 30rpx;
				.btnBox {
					width: 150rpx;
					&+.btnBox {
						margin-left: 30rpx;
					}
				}
			}
		}
	}
}
</style>
